<template>
	<div class="entry_container">
		<k-header headTitle="登录" goBack="true"></k-header>
		<div :class="headIos?'archieve_container-ios':'entry_content'" v-if="showiden">
			<input class="entry-phone _input" v-model="ymobile" maxlength="11" placeholder="请输入手机号码">
			<div class="entry_pass">
				<input v-if="!visiable" type="password" v-model="inputdata" class="entry-pass _input " placeholder="请输入密码">
				<input v-if="visiable" type="text" v-model="inputdata" class="entry-pass _input" placeholder="请输入密码"/>
				<i v-if="visiable" @click='vis' class="visiable"></i>
				<i v-if="!visiable" @click='invis' class="invisiable"></i>
			</div>
			<router-link class="lookiden" :to="{path:'/lookiden',query: {mobile: this.ymobile}}">忘记密码？</router-link>
			<button :disabled="passdiss" :class="{'disable':passdiss}" @click="_passdiss" class="entry_prsee">登录</button>
			<a class="entryIden" @click="showidenn">验证码登录</a>
			<toast v-model="showPositionValue" type="text" width="100%" :time="1800" is-show-mask :text="message" position="bottom"></toast>
			<router-link class="sign" to="sign">没有账户？去注册</router-link>
		</div>
		
		<div :class="headIos?'archieve_container-ios':'entry_content'" v-if="!showiden">
			<input class="entry-phone _input" placeholder="请输入手机号码" maxlength="11" v-model="pmobile">
			<div class="entry_yanzheng">
				<input type="password" maxlength="4" class="entry-pass _input" placeholder="请输入验证码"  v-model="code">
				<button @click="kedian" :disabled="kedianji" class="kedian">{{data}}</button>
			</div>
			<button :disabled="idendiss" :class="{'disable':idendiss}" @click="_idendiss" class="entry_prsee entry_fasong">登录</button>
			<button class="entryIden"  @click="showidenn">密码登录</button>
			<toast v-model="showPositionValue" type="text" width="100%" :time="1800" is-show-mask :text="message" position="bottom"></toast>
			<router-link class="sign" to="sign">没有账户？去注册</router-link>
		</div>
	</div>
</template>

<script>
	import kHeader from '../common/head';
	import util from '../../libs/util';
	import { Toast} from 'vux';
	var iTime;
	export default {
        data () {
            return {
            	visiable:false,
            	seen:false,
            	inputdata:'',
            	data: '发送验证码',
            	time: 60,
            	showiden:false,
            	passdiss:false,
            	idendiss:false,
            	ymobile:'',
            	pmobile:'',
            	showPositionValue:false,
            	message:'请输入正确的手机号',
							code:'',
							headIos:false,
							kedianji:false
            }
        },
        components: {
        	kHeader,
        	Toast
        },
        created(){
					if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
						this.headIos = true
					} else {
						this.headIos = false
					}
        	if(this.$route.query.mobile){
        		this.ymobile=this.$route.query.mobile;
						this.pmobile=this.$route.query.mobile;
        	}
				},
        methods:{
					vis : function () {
	          	this.visiable = !this.visiable;
	          	this.seen = !this.seen;
	        },
	        invis : function () {
	          	this.visiable = !this.visiable;
	          	this.seen = !this.seen;
	        },
	        showidenn : function (){
	        	this.showiden = !this.showiden;
	        	clearInterval(iTime);
	        	this.time=60;
	        	this.data ='发送验证码';
	        },
	        kedian : function(){
						this.kedianji=true;
	        	var url ='/lblsapp-h5/v2/account/sendSMS.json';
        		let datas={mobile:this.pmobile,source:'LOGIN'};
	        	var regtel = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01356789]|18[0-9]|14[579])[0-9]{8}$/;
        		var istel = regtel.test(this.pmobile);
        		var that = this;
        		if(istel){
        			this.data = 60 + 's';
        			iTime = setInterval(function(){
        				that.time--;
        				that.data = that.time + 's';
        				if(that.time ==0){
        					that.data = '发送验证码';
        					that.time = 60;
									that.kedianji=false;
									clearInterval(iTime);
        				}
        			},1000);
        			util.ajax.post(url, datas).then(function(data){
        				console.log(data,2222)
	        		 	if(data.data.code==='0'){
	        		 	}else{
									that.data = '发送验证码';
									that.time = 60;
									that.kedianji = false;
									clearInterval(iTime);
	        		 		that.message = data.data.res.msg;
	        		 		that.showPositionValue=true;
	        		 	}
	        		}).catch(function(error){
	        			console.log(error);
	        		})
        		}else{
							this.kedianji = false;
        			this.message='请输入正确的手机号';
        			this.showPositionValue=true;	
        		}
        	},
        	_idendiss : function(){
        		this.idendiss=true;
        		var url ='lblsapp-h5/v2/account/login.json';
        		let data={mobile:this.pmobile,smsCode:this.code};
        		var regtel = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01356789]|18[0-9]|14[579])[0-9]{8}$/;
        		var istel = regtel.test(this.pmobile);
        		if(istel){
        			var that = this;
        			util.ajax.post(url, data).then(function(data){
        				console.log(data,3333)
        				if(data.data.code==='0'){
	        		 		that.$cookie.set('mobole', that.pmobile, 50);
									 that.$cookie.set('token', data.data.res.data, 50);
									 that.$router.push({ path: '/' });
	        		 	}else{
	        		 		that.message = data.data.res.msg;
	        		 		that.showPositionValue=true;
	        		 		that.idendiss=false;
	        		 	}
        			})
        		}else{
        			this.message='请输入正确的手机号';
        			this.showPositionValue=true;
        		}
					},
        	_passdiss : function(){
        		this.passdiss = true;
        		var regtel = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01356789]|18[0-9]|14[579])[0-9]{8}$/;
        		var istel = regtel.test(this.ymobile);
        		var that = this;
        		if(istel){
		        	var url = '/lblsapp-h5/v2/account/accountLogin.json';
		        	let data = {mobile:this.ymobile,pw:this.inputdata};
		        	util.ajax.post(url, data).then(function(data){
		        		if(data.data.code ==='0'){
									that.$cookie.set('mobole', that.ymobile, 50);
									that.$cookie.set('token', data.data.res.data, 50);
									that.$router.push({ path: '/' });
		        		}else{
		        			that.message = data.data.res.msg;
		        		 	that.showPositionValue=true;
		        			that.passdiss = false;
		        		}
		        	}).catch(function(error){
		        		console.log(error);
		        		that.passdiss = false;
		        	})
        		}else{
        			this.message='请输入正确的手机号';
        			this.showPositionValue=true;
        		}
        	}
        }
    }
</script>
	
<style>
	.entry_container {
	    background: #ffffff;
	    height: 100%;
	    box-sizing: border-box;
	}
	.archieve_container-ios{		
		padding: 0 8%;
		position: relative;
		margin-top: 78px;
	}
	.entry_content{
		margin-top: 58px;
		padding: 0 8%;
		position: relative;
	}
	.entry_contentt{
		margin-top: 58px;
		position: relative;
	}
	.archieve_containerr-ios{		
		position: relative;
		margin-top: 78px;
	}
	._input{
		box-sizing: border-box;
		width: 100%;
		margin: 13px 0 1px 0;
		height: 44px;
		line-height: 44px;
		background: #F5F5F5;
		border: none;
		padding-left: 10px;
		font-size: 1.4rem;
		display: block;
		-webkit-appearance:none;
		border-radius: 0;
		outline: none;
	}
	.entry_pass{
		position: relative;
	}
	.entry_prsee{
		width: 100%;
		height: 42px;
		line-height: 42px;
		background: #F89721;
	border-radius: 2px;
	text-align: center;
	color: #ffffff;
	margin: 0px 0 20px 0 !important;
	border: none;
	display: block;
	font-size: 1.4rem;
	}
	.entry-pass{
		margin-top: 1px;
	}
	.entryIden{
		font-size: 1.4rem;
		color: #212121;
		float: left;
		background: none;
		border: none;
	}
	.visiable{
		z-index: 9;
		position: absolute;
		top: 29px;
		right: 11.7%;
		width: 24px;
		height: 14px;
		background-size: 24px 14px;
		background-position: center center;
		background-image: url(../../assets/img/user/visiable.png); 
	}
	.invisiable{
		z-index: 9;
		position: absolute;
		top: 29px;
		right: 11.7%;
		width: 24px;
		height: 12px;
		background-size: 24px 12px;
		background-position: center center;
		background-image: url(../../assets/img/user/invisiable.png); 
	}
	.lookiden{
		display: inline-block;
		margin: 24px 0 14px 0;
		float: right;
		color: #808080;
		font-size: 12px;
		height: 17px;
		line-height: 17px;
	}
	.sign{
		float: right;
	font-size: 14px;
	color: #F89721;
	letter-spacing: 0;
	}
	.entry_yanzheng{
		position: relative;
	}
	.entry_fasong{
		margin-top: 55px !important;
	}
    .disable{
    	color: #F1B485 !important;
    }
</style>